<template>
  <div style="width:100%;background-color:rgba(255,255,255,0.75); margin-top:-5px">
  <div class="News block">
   <div class="title">
      <div>新闻中心</div>
      <div class="min">NEWS</div>
      <router-link to="/NewsCenter/journalism/#all" class="go-more">查看更多</router-link>
    </div>
   <el-row class="news_body">
    <el-col :span="12" :xs="24" v-for = "item in newList" :key = "item.id">
      <router-link :to="`/detail/journalism/${item.id}`" class="news_item" >
          <div class="hidden-xs-only img-wrap">
            <img width="100%" :src="item.img">
            </div>
            <div class="n1_text">
              <h4>{{item.title}}</h4>
              <p>{{item.synopsis}}</p>
            </div>
      </router-link>
    </el-col>
  </el-row>
  </div> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      newList: ''
    }
  },
  created() {
    this.$request({url: '/journalism/?page=1&size=5'}).then(
      result => {
        const {data} = result;
        this.newList =data.results
      }
    )
  }
}
</script>


<style lang="stylus">
.News 
  overflow: hidden;
  .news_body
    margin 0 auto
    max-width 1200px
    width auto
    margin-top 30px
    .news_item
      display inline-block
      background-color: #fff
      box-sizing border-box
      margin 10px
      overflow hidden
      border-radius 5px
      cursor pointer
      width  calc(100% - 20px)
      &:hover
        text-decoration: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 0 6px rgba(0,0,0,0.04);
        .n1_text h4
          color #d21c27
      .img-wrap
        display inline-block
        width 140px
        height 90px
        overflow hidden
        margin-right -160px
        float left
        margin-top: 15px;
        margin-left 15px

      .n1_text
          padding 10px
          padding-left 165px
          h4
            font-size 16px
            font-weight 800
            height 40px
            line-height 40px
            text-overflow ellipsis
            white-space nowrap
            overflow hidden
          
          p
            font-size 14px
            line-height 18px
            height 54px
            overflow hidden
            text-overflow:ellipsis;
            text-align justify
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
      
    .el-col:first-child .news_item
      .img-wrap
        margin 0
        width 100%
        height 415px
      .n1_text
        padding-left 10px
        display inline-block
        float left
    
    @media (max-width 765px) 
      .el-col .news_item
        width 100%
        box-sizing border-box
        margin 5px 0
        .img-wrap
          width 100%
        .n1_text
          padding-left 10px
          width: 100%;
          display inline-block
          float left
          padding-bottom 15px
          box-sizing: border-box;

</style>